<template>
  <div class="price-tracking">
    <!-- 筛选区域 -->
    <el-form :model="filterForm" inline class="filter-form" label-width="80px">
      <!-- 日期范围 -->
      <el-form-item label="变更日期">
        <el-date-picker
          v-model="filterForm.dateRange"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          :default-value="[new Date('2025-06-01'), new Date('2025-06-24')]"
        />
      </el-form-item>

      <!-- 商品选择（支持模糊搜索） -->
      <el-form-item label="商品">
        <el-select
          v-model="filterForm.goods"
          placeholder="请选择商品"
          clearable
          remote
          :remote-method="searchGoods"
          loading-text="搜索中..."
        >
          <el-option
            v-for="item in goodsOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 供应商选择（支持模糊搜索） -->
      <el-form-item label="供应商">
        <el-select
          v-model="filterForm.supplier"
          placeholder="请选择供应商"
          clearable
          remote
          :remote-method="searchSupplier"
          loading-text="搜索中..."
        >
          <el-option
            v-for="item in supplierOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 变更类型 -->
      <el-form-item label="变更类型">
        <el-select v-model="filterForm.changeType" placeholder="请选择">
          <el-option label="购货单" value="purchase"></el-option>
          <el-option label="退货单" value="return"></el-option>
          <el-option label="调价单" value="priceAdjust"></el-option>
        </el-select>
      </el-form-item>

      <!-- 商品类别 -->
      <el-form-item label="商品类别">
        <el-select v-model="filterForm.category" placeholder="请选择">
          <el-option label="食品" value="food"></el-option>
          <el-option label="饮料" value="drink"></el-option>
          <el-option label="日用品" value="daily"></el-option>
        </el-select>
      </el-form-item>

      <!-- 业务员选择（支持模糊搜索） -->
      <el-form-item label="业务员">
        <el-select
          v-model="filterForm.salesman"
          placeholder="请选择业务员"
          clearable
          remote
          :remote-method="searchSalesman"
          loading-text="搜索中..."
        >
          <el-option
            v-for="item in salesmanOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <!-- 只看最近一次 -->
      <el-form-item>
        <el-checkbox v-model="filterForm.onlyLatest">只看最近一次</el-checkbox>
      </el-form-item>

      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetFilter">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="success" @click="handleExport">导出</el-button>
      <el-button type="info" @click="handlePrint">打印</el-button>
    </div>

    <!-- 历史价表格（带排序） -->
    <el-table
      :data="tableData"
      border
      :header-cell-style="{ background: '#F8F9FA' }"
    >
      <el-table-column prop="code" label="商品编号" width="120" />
      <el-table-column prop="name" label="商品名称" width="150" />
      <el-table-column prop="unit" label="单位" width="80" />
      <el-table-column prop="attr" label="辅助属性" width="120" />
      <el-table-column prop="changeType" label="变更类型" width="120" />
      <el-table-column
        prop="changeTime"
        label="变更时间"
        width="180"
        sortable
        :sort-method="sortByTime"
      />
      <el-table-column prop="salesman" label="业务员" width="100" />
      <el-table-column
        prop="priceBefore"
        label="单价（变更前）"
        width="120"
        align="right"
      />
      <el-table-column
        prop="priceAfter"
        label="单价（变更后）"
        width="120"
        align="right"
      />
      <el-table-column
        prop="taxPriceBefore"
        label="含税单价（变更前）"
        width="150"
        align="right"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  name: "PurchasePriceTracking",
  data() {
    return {
      // 筛选条件
      filterForm: {
        dateRange: ["2025-06-01", "2025-06-24"],
        goods: "",
        supplier: "",
        changeType: "",
        category: "",
        salesman: "",
        onlyLatest: false,
      },
      // 模拟下拉选项（远程搜索结果）
      goodsOptions: [],
      supplierOptions: [],
      salesmanOptions: [],
      // 5条历史价数据
      tableData: [
        {
          code: "SP0001",
          name: "巧克力",
          unit: "盒",
          attr: "无",
          changeType: "购货单",
          changeTime: "2025-06-21 10:53:26",
          salesman: "张三",
          priceBefore: 0,
          priceAfter: 1500,
          taxPriceBefore: 0,
        },
        {
          code: "SP0002",
          name: "白巧克力礼盒",
          unit: "盒",
          attr: "精装",
          changeType: "购货单",
          changeTime: "2025-06-21 10:53:26",
          salesman: "李四",
          priceBefore: 0,
          priceAfter: 2100,
          taxPriceBefore: 0,
        },
        {
          code: "SP0003",
          name: "果汁饮品礼盒",
          unit: "盒",
          attr: "普通",
          changeType: "购货单",
          changeTime: "2025-06-21 10:53:26",
          salesman: "王五",
          priceBefore: 0,
          priceAfter: 2000,
          taxPriceBefore: 0,
        },
        {
          code: "SP0004",
          name: "糖果150g",
          unit: "包",
          attr: "无",
          changeType: "购货单",
          changeTime: "2025-06-21 10:53:26",
          salesman: "赵六",
          priceBefore: 0,
          priceAfter: 1000,
          taxPriceBefore: 0,
        },
        {
          code: "SP0005",
          name: "脆饼",
          unit: "包",
          attr: "无",
          changeType: "购货单",
          changeTime: "2025-06-14 10:25:25",
          salesman: "孙七",
          priceBefore: 100.65,
          priceAfter: 3,
          taxPriceBefore: 0,
        },
      ],
    };
  },
  methods: {
    // 模拟商品远程搜索
    searchGoods(keyword) {
      this.goodsOptions = [
        { label: `商品A-${keyword}`, value: `SP000${keyword}` },
        { label: `商品B-${keyword}`, value: `SP001${keyword}` },
      ];
    },
    // 模拟供应商远程搜索
    searchSupplier(keyword) {
      this.supplierOptions = [
        { label: `供应商A-${keyword}`, value: `supplierA-${keyword}` },
        { label: `供应商B-${keyword}`, value: `supplierB-${keyword}` },
      ];
    },
    // 模拟业务员远程搜索
    searchSalesman(keyword) {
      this.salesmanOptions = [
        { label: `业务员${keyword}`, value: `sales${keyword}` },
      ];
    },
    // 时间排序逻辑（按变更时间降序）
    sortByTime(a, b) {
      return new Date(b.changeTime) - new Date(a.changeTime);
    },
    // 查询事件（模拟筛选）
    handleQuery() {
      // 实际逻辑：根据filterForm过滤tableData
      this.$message.success("查询成功！");
    },
    // 重置筛选条件
    resetFilter() {
      this.filterForm = {
        dateRange: ["2025-06-01", "2025-06-24"],
        goods: "",
        supplier: "",
        changeType: "",
        category: "",
        salesman: "",
        onlyLatest: false,
      };
      this.$message.info("筛选条件已重置");
    },
    // 导出数据（模拟）
    handleExport() {
      this.$message.info("导出功能待实现");
    },
    // 打印数据（模拟）
    handlePrint() {
      this.$message.info("打印功能待实现");
    },
  },
};
</script>

<style scoped>
.price-tracking {
  padding: 24px;
  background: #fff;
}

.filter-form {
  margin-bottom: 16px;
}

.action-bar {
  margin: 12px 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.el-table {
  width: 100%;
  margin-top: 8px;
}

.el-table-column {
  text-align: center;
}
</style>